<template>
	<view class="fill-record">
		<view class="search">
			<view class="search-input" @click="showCalendar = true">
				<u--input placeholder="日期" border="none" v-model="dateValue" shape="circle" :disabled="true"></u--input>
				<u-icon name="calendar" size="24"></u-icon>
			</view>
			<view class="option" @click="showPicker = true">
				<view>{{ isFinished ? '已完成' : '未完成' }}</view>
				<u-icon name="arrow-down" color="#2f80ed" size="18"></u-icon>
			</view>
		</view>
		<u-picker :show="showPicker" :columns="stateColumns" keyName="name" @confirm="pickerSure" @cancel="showPicker = false"></u-picker>
		<u-calendar :show="showCalendar" mode="single" @confirm="confirm" @close="close" :minDate="minDate" monthNum="24"></u-calendar>
		<scroll-view @scrolltolower="scrolltolower" scroll-y class="container"
			:style="{height: 'calc(100vh - ' + containerOutsideHeight + 'px)'}">
			
					<fill-record-item v-for="(item, index) in fillRecordArray" :key="index"  :data="item"
						@fnGetList="refreshDataList"></fill-record-item>
						<u-empty v-if="!fillRecordArray.length" mode="data" text="數據爲空" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
		</scroll-view>
	</view>

</template>

<script>
	import fillRecordItem from "./fill-record-item.vue";
	import fileMixin from "@/mixins/file.js";
	import {hkRepairPlan_list } from "@/api/HongKong/hkAttendanceSheet.js";
	import { getSystemHeightInfo } from "@/utils/common.js";
	import { handleFormatDate } from "@/utils/date.js";
	import moment from "@/utils/moment.js"
	export default {
		name: "fill-repair-record",
		mixins: [fileMixin],
		components: {
			fillRecordItem
		},
		data() {
			return {
				// 容器之外的高度
				containerOutsideHeight: 0,
				// 填报记录列表
				fillRecordArray: [],
				// 分页器
				paging: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
				},
				// 是否正在加载中
				isLoading: false,
				isFinished: false,
				showCalendar:false,
				dateValue:'',
				minDate:moment().subtract(480, 'days').format('x'),
				// defaultDate:[moment().format('YYYY-MM-DD'),moment().add(3, 'days').format('YYYY-MM-DD')],
				showPicker:false,
				stateColumns:[[
					{name:'未完成', value:false},
					{name:'已完成', value:true},
				]]
			}
		},
		async mounted() {
			this.initContainerData();
			this.fillRecordArray = await this.getFillRecordArray();
		},
		methods: {
			async confirm(e) {
				console.log(e);
				this.dateValue = e[0]
				this.showCalendar = false
				this.fillRecordArray = await this.getFillRecordArray();
			},
			async close() {
				this.showCalendar = false
				this.dateValue = ''
				this.fillRecordArray = await this.getFillRecordArray();
			},
			async pickerSure(e) {
				// console.log(e);
				this.isFinished = e.value[0].value
				this.showPicker = false
				this.fillRecordArray = await this.getFillRecordArray();
				// console.log(this.$parent)
				if(this.isFinished) {
					// #ifdef APP-PLUS || MP-WEIXIN
						this.$parent.badgeNum = 0
					// #endif
					// #ifdef H5
						this.$parent.$parent.badgeNum = 0
					// #endif
				}else {
					// #ifdef APP-PLUS || MP-WEIXIN
						this.$parent.badgeNum = await this.$parent.getBadgeNumber()
					// #endif
					// #ifdef H5
						this.$parent.$parent.badgeNum = await this.$parent.$parent.getBadgeNumber()
					// #endif
					
				}

			},
			/** 初始化容器数据 */
			initContainerData() {
				const { stateHeight, bottomHeight, navbarHeight} = getSystemHeightInfo();
				this.containerOutsideHeight = stateHeight + bottomHeight + navbarHeight + 150;
			},
			async refreshDataList() {
				this.paging.pageNum = 1;
				this.fillRecordArray = await this.getFillRecordArray();
			},
			/** 获取填报记录列表 */
			getFillRecordArray() {
				return new Promise(resolve => {
					const { pageNum, pageSize } = this.paging;
					hkRepairPlan_list({
						currPage: pageNum,
						pageSize,
						params: {
							isFinish:this.isFinished,
							repairDate:this.dateValue,
							projectId: uni.getStorageSync("isOwner"),
						},
					}).then(async res => {
						const { list, total } = res.result;
						this.paging.total = total;
						resolve(list);
					});
				});
			},
			/** 容器滚动到底部 */
			async scrolltolower() {
				// 判断是否有下一页
				if (!this.isLoading && this.paging.pageNum * this.paging.pageSize < this.paging.total) {
					// 加载...
					this.isLoading = true;
					this.paging.pageNum++;
					this.fillRecordArray = this.fillRecordArray.concat(await this.getFillRecordArray());
					this.isLoading = false;
				}
			},

			/** 确认搜索 */
			async confirmSearch() {
				this.paging.pageNum = 1;
				this.fillRecordArray = await this.getFillRecordArray();
			},
			async clearCondition(val) {
				if (!val) {
					this.paging.pageNum = 1;
					this.fillRecordArray = await this.getFillRecordArray();
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.fill-record {
		padding-top: 22upx;

		.search {
			padding: 22upx 16upx 28upx;
			background: #fff;
			height: 88upx;
			position: sticky;
			top: -1px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 1;
			border-top: 1px solid #fff;

			.search-input {
				display: flex;
				align-items: center;
				height: 100%;
				margin-right: 12upx;
				flex: 1;
				justify-content: space-between;
				width: 240rpx;
				border: 1px solid #f5f7fa;
				border-radius: 50rpx;
				padding: 0 40rpx;
				background: #f5f7fa;
			}

			.option {
				height: 44px;
				line-height: 44px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: #f5f7fa;
				border-radius: 25px;
				width: 100px;
				box-sizing: border-box;
				padding: 0 14px;
				flex-shrink: 0;
				white-space: nowrap;

				view {
					color: #2f80ed;
				}

			}
		}
	}
</style>